<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="前台头部">
<meta name="author" content="xwj" >
 <link rel="stylesheet" type="text/css" href="jsutil/sweetalert.css">
 
 <script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

<title>头部</title>
<script>
$(document).ready(function(){ 
	// 头部我的购物车信息
	//getMyCarInfo();
	 getMyCarInfo();
});

function logout(){
	 getMyCarInfo();
	if(confirm("确认要退出吗?")){

		$.ajax({
			
			url : "userMsg/logout.do", // 请求地址
			type : "POST", // 请求类型
			async : "true", // 是否异步方式
			data : {},
			dataType : "json", // 返回数据格式
			success : function(data, textStatus) {
				if (data.res == 1) {
					alert("退出成功！");
					window.location.replace("public_user/index.jsp");
					}else{
						alert("退出失败！");
					}
			}
		});
	}
}
//获得我的购物车前三本书籍信息
function getMyCarInfo(){
	
	$.ajax({
		url : "shopCartMsg/getMyCartList.do", // 请求地址
		type : "POST", // 请求类型
		async : "true", // 是否异步方式
		data : {},
		dataType : "json", // 返回数据格式
		success : function(data) {
			var myTopCart=$("#myTopCart");
				myTopCart.empty();
				//商品数量
				var item=0;
				//商品价格
				var total=0;
			if(data.res>0){
					$.each(data.list,function(index, element) {
						  	if(index<3){
							var divs=" <div class='media header-middle-checkout last-child'>"
			                      +" <div class='media-left check-img'>"
		                        +"<a href='javascript:detail("+element.bid+")'><img src='"+element.bpicurl+"' alt='' /></a>"
		                    +"</div>"
		                    +"<div class='media-body checkout-content'>"
		                        +"<h4 class='media-heading'>"
		                               +" <span class='cart-count'>"+element.shopcart.snum+"x</span>"
		                                +"<a href='javascript:detail("+element.bid+")'>"+element.bname+"</a>"
		                                +"<span class='btn-remove checkout-remove'  onclick='delOneMyCart("+element.shopcart.sid+")'title='移除我的购物车'>"
		                                +"<i class='fa fa-times' aria-hidden='true'></i></span>"
		                            +"</h4>"
		                        +"<p>￥"+ element.bprice+"</p>"
		                   +" </div>"
		                   +" </div>"
								myTopCart.append(divs); 
						total=total+(element.bprice*element.shopcart.snum);
						item=index+1;
						 }
					});
					var items=$('#three_pay');
					items.empty();
					items.html(item+"件商品，共￥"+total);
					$("#zje").empty();
					$("#zje").html("￥"+total);
				}
		}
	});
}
//删除单个购物车
function delOneMyCart(sid){
	

	if (!confirm("确认要删除该商品吗?")) {
		return;
	}
	$.ajax({
		url : 'shopCartMsg/delOneCart.do',
		type : 'POST',
		async : "true",
		data : {
			"sid":sid
		},
		dataType : 'json',
		success : function(data) {
			if(data.res==0){
				alert("你还没登录！");
			}
			else if (data.res>0) {
				alert("删除成功！");
				getMyCarInfo();
				window.location.replace("public_user/index.jsp");
			}else{
				alert("删除失败！");
			}
		}
	});
	
}
/* 跳转到图书详情界面  */
	function detail(bookId){
		window.location.href="public_user/detail.jsp?id="+bookId;
	}
</script>
</head>
<body>
        <header>
            <div class="header-top">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12 hidden-xs">
                            <div class="header-top-left">
                                <div class="welcome-msg">
                                <a href="public_user/index.jsp">
                                    <span class="default-msg hidden-xs" style="color:#FFFFFF">
                                   	 天天书城</span></a>
                                   
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="header-top-right">
                            <c:choose>
                            <c:when test="${user ==null }">
								 <ul class="header-links hidden-xs">
                                    <li><a class="checkout" href="public_user/register.jsp">注册</a></li>
                                    <li><a class="login" href="public_user/login.jsp">登录</a></li>
                                </ul>
							</c:when>
                               <c:otherwise>
                                <div class="currency language">
                                    <div class="current">
                                        <span>${user.uname}</span>
                                    </div>
                                    <ul class="lang">
                                        <li class="selected"><a href="public_user/my_info.jsp" title=""><span class="dollar">个人信息</span></a></li>
                                        <li><a href="public_user/modifypwd.jsp" title=""><span class="euro">修改密码</span></a></li>
                                         <li><a href="public_user/my_order.jsp" title=""><span class="sheqel">我的订单</span></a></li>
                                   		<li><a onclick="logout()" ><span class="euro">退出</span></a></li>
                                    </ul>
                                </div>
                         		</c:otherwise>
							</c:choose>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-middle">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-12 col-xs-8">
                            <div class="logo">
                                <a href="public_user/index.jsp"><img src="images/logo2.jpg" alt="" /></a>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-6 hidden-xs">
                            <div class="search-box">
                                <form action="public_user/shop.jsp">
                                    <input class="form-control search-form" type="text" placeholder="请输入要查询的书名、作者、出版社、关键字等" name="searchKey"/>
                                    <button class="search-button"  type="submit"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-4 col-sm-6">
                            <div class="shopping-cart">
                                <a class="cart" href="#" title="view shopping cart"><span class="hidden-xs">购物车 <br><small id="three_pay"></small></span></a>
                                <div class="top-cart-content">
                                	<div id="myTopCart">
                                    </div>
                                    <div class="cart-total">
                                        <span >总金额</span>
                                        <span><b id="zje">￥0</b></span>
                                    </div>
                                    <div class="checkout">
                                        <a href="public_user/my_cart.jsp"><span>查看更多<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-menu-area hidden-xs hidden-sm">
                <div class="container">
                    <div class="row">
                        <div class="colo-md-12">
                            <div class="main-menu">
                                <nav>
                                    <ul>
                                        <li><a href="public_user/index.jsp">首页</a></li>
										<li><a href="public_user/shop.jsp">商品</a></li>
                                        <li><a href="public_user/contact.jsp">联系我们</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- mobile-menu-area-start -->
            <div class="mobile-menu-area visible-xs visible-sm">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mobile_menu">
                                <nav id="mobile_menu_active">
                                    <ul>
                                        <li><a href="public_user/index.jsp">首页</a></li>
										<li><a href="public_user/shop.jsp">商品</a></li>
                                        <li><a href="public_user/detail.jsp">联系我们</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- mobile-menu-area-end -->
        </header>
</body>
</html>